<template>
  <div class="addGoods-main">
    <el-card shadow="never" style="padding: 30px 260px;">
      <!-- 进度条 -->
      <el-steps align-center :active="active" finish-status="success">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>
    </el-card>

    <el-card class="margin-30" shadow="never" :body-style="{ padding: '20px' }">
      <el-form
        ref="productForm"
        style="padding-left: 30px;"
        :model="product"
        :rules="rules"
        label-width="100px"
        size="small"
      >
        <!-- 基本信息 -->
        <div v-if="active == 0">
          <div>基本信息</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="7" :offset="0">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="product.name" />
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="商品编码" prop="productSn">
                <el-input v-model="product.productSn" />
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="商品分类" prop="productCategoryId">
                <el-cascader v-model="product.productCategoryId" :options="categoryItems" :props="categoryProps" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7" :offset="0">
              <el-form-item label="商品品牌" prop="brandId">
                <el-select v-model="product.brandId" style="width: 100%;" placeholder="品牌" clearable>
                  <el-option v-for="item in BrandList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="14" :offset="0">
              <el-form-item label="商品描述" prop="description">
                <el-input v-model="product.description" type="textarea" :rows="2" placeholder="请输入商品描述" />
              </el-form-item>
            </el-col>
          </el-row>
          <div>商品属性</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="7" :offset="0">
              <el-form-item label="商品原价" prop="originalPrice">
                <el-input-number v-model="product.originalPrice" style="width: 100%;" :min="0" :step="100" />
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="促销类型">
                <!--  // 促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购 , -->
                <el-select v-model="product.promotionType" disabled placeholder="请选择">
                  <el-option label="没有促销使用原价" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="活动价格">
                <el-input-number :disabled="true" style="width: 100%;" :min="0" :step="100" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7" :offset="0">
              <el-form-item label="重量(kg)" prop="weight">
                <el-input-number v-model="product.weight" style="width: 100%;" :min="0" :step="1" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7" :offset="0">
              <el-form-item label="审核状态">
                <el-switch v-model="product.verifyStatus" :active-value="1" :inactive-value="0" />
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="是否上架">
                <el-switch v-model="product.publishStatus" :active-value="1" :inactive-value="0" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="20" :offset="0">
              <el-form-item label="缩略图" prop="pic">
                <el-upload
                  :action="uploadFileOss"
                  clear-files
                  :headers="token"
                  :show-file-list="false"
                  :on-success="handleCoverImgSucc"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="product.pic" width="150" height="150" :src="product.pic">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过1.5MB</div>
                </el-upload>
              </el-form-item>
            </el-col>

          </el-row>
          <!-- 其他信息 -->
          <div>
            <div>其他信息</div>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="7" :offset="0">
                <el-form-item label="推荐状态">
                  <el-switch v-model="product.recommendStatus" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item label="新品状态">
                  <el-switch v-model="product.newStatus" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item label="预告商品">
                  <el-switch v-model="product.previewStatus" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="7" :offset="0">
                <el-form-item label="搜索关键词" prop="keywords">
                  <el-input v-model="product.keywords" placeholder="关键词" size="small" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item label="库存预警" prop="lowStock">
                  <el-input-number v-model="product.lowStock" style="width: 100%;" :min="0" :step="100" />
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item label="商品排序" prop="sort">
                  <el-input-number v-model="product.sort" style="width: 100%;" :min="0" :step="100" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <!-- 1->无忧退货；2->快速退款；3->免费包邮 -->
                <el-form-item label="商品服务" prop="serviceIds">
                  <el-checkbox-group v-model="serviceIds">
                    <el-checkbox label="1">无忧退货</el-checkbox>
                    <el-checkbox label="2">快速退款</el-checkbox>
                    <el-checkbox label="3">免费包邮</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

        </div>

        <div v-else-if="active == 1">
          <div>商品sku信息</div>
          <el-divider />
          <!-- <el-form ref="skuForm" :model="product" :rules="rules" label-width="80px" size="small"> -->
          <el-row :gutter="20">
            <el-col :span="7" :offset="0">
              <el-form-item label="标题" prop="detailTitle">
                <el-input v-model="product.detailTitle" placeholder="标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="1">
              <el-form-item label="副标题" prop="detailDesc">
                <el-input v-model="product.detailDesc" placeholder="副标题" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20" :offset="0">
              <el-form-item label="画册图片">
                <el-upload
                  :action="uploadFileOss"
                  :headers="token"
                  list-type="picture-card"
                  multiple
                  :limit="5"
                  :file-list="fileList"
                  :before-upload="beforeAvatarUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handlePicSucc"
                >
                  <i class="el-icon-plus" />
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过1.5MB</div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- sku -->
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="sku设置">
                <div v-show="tempSkuColor.list.length">
                  <span>颜色:</span>
                  <el-checkbox-group v-model="tempSkuColor.checkdeList" style="display: inline-block; margin-left: 10px;">
                    <el-checkbox v-for="item in tempSkuColor.list" :key="item" :label="item">{{ item }}
                      <span style="color: #f00;" @click.stop="removeOptions('color', item)">删除</span>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div v-show="tempSkuSize.list.length">
                  <span>容量:</span>
                  <el-checkbox-group v-model="tempSkuSize.checkdeList" style="display: inline-block; margin-left: 10px;">
                    <el-checkbox v-for="item in tempSkuSize.list" :key="item" :label="item">{{ item }}
                      <span style="color: #f00;" @click.stop="removeOptions('size', item)">删除</span>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex; align-items: center;">
                  <el-input v-model="tempSkuColor.text" style="width: 200px;" placeholder="颜色设置: 例如土豪金" clearable />
                  <el-button style="margin: 0 10px;" type="default" @click="addSkuOptions('color')">创建颜色选项</el-button>
                  <el-input v-model="tempSkuSize.text" style="width: 200px;" placeholder="颜色设置: 例如土豪金" clearable />
                  <el-button style="margin: 0 10px;" type="default" @click="addSkuOptions('size')">创建大小选项</el-button>
                  <el-button type="primary" style="margin-left: 150px;" @click="buildSkuList">生成sku列表</el-button>
                  <el-button type="primary" @click="newAddSkList">新增sku</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col v-if="pmsSkuStockList.length" :span="24" :offset="0">
              <el-table style="margin-top: 30px;" :data="pmsSkuStockList" border stripe>
                <el-table-column fixed="left" label="#" type="index" align="center" width="50" />
                <el-table-column label="图片" align="center" width="100">
                  <template slot-scope="scope">
                    <el-upload
                      :action="uploadFileOss"
                      :headers="token"
                      :show-file-list="false"
                      :on-success="handleSkuPic"
                      :before-upload="beforeAvatarUpload"
                      style="width: 80px; height: 80px;"
                      @click.native="handlPicUpload(scope.row.tempId,scope.row)"
                    >
                      <el-image v-if="scope.row.pic" style="width: 70px; height: 70px;" :src="scope.row.pic" fit="fill" />
                      <i
                        v-else
                        style="width: 80px; height: 80px; line-height: 80px;"
                        class="el-icon-plus avatar-uploader-icon"
                      />
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column label="颜色" align="center" width="130">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.color" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="大小" align="center" width="150">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.size" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="库存" align="center" width="130">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.stock" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="预警库存" align="center" width="130">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.lowStock" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="锁定库存" align="center" width="130">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.lockStock" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="sku编码" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.skuCode" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="价格" align="center" width="130">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.price" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="销量" align="center" width="130">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.sale" size="mini" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      style="color:#f00"
                      @click="removeSkuList(scope.row.id)"
                    >删除</el-button>
                  </template>
                </el-table-column>

              </el-table>

            </el-col>
          </el-row>

          <!-- </el-form> -->
        </div>
        <div v-else-if="active == 2">
          <div>详细描述</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="商品详情" prop="detailMobileHtml">
                <Tinymce ref="tinymce" v-model="product.detailMobileHtml" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20" :offset="0">
              <el-form-item label="备注" prop="detailMobileHtml">
                <el-input v-model="product.note" type="textarea" :rows="2" placeholder="备注" />
              </el-form-item>
            </el-col>
          </el-row>

        </div>

        <div style="display: flex; justify-content: center; margin-top: 30px">
          <el-button v-if="active !== 0" size="mini" @click="prev">返回上一步</el-button>
          <el-button v-if="active === 0" size="mini" type="primary" @click="next">下一步,填写库存信息</el-button>
          <el-button v-if="active === 1" size="mini" type="primary" @click="next">下一步,填写移动端详情</el-button>
          <el-button
            v-if="active === 2 && !this.$route.params.productId"
            size="mini"
            type="primary"
            @click="getaddProductAndSkus"
          >提交保存</el-button>
          <el-button
            v-if="active === 2 && this.$route.params.productId"
            size="mini"
            type="primary"
            @click="getupdateProductAndSkus"
          >确认修改</el-button>
        </div>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import mix from '@/mixins'
// import { v4 as uuidv4 } from 'uuid'
import Tinymce from '@/components/Tinymce'
import { addProductAndSkus, productSkusDetail, updateProductAndSkus } from '@/api/product'
export default {
  name: 'AddGoods',
  components: {
    Tinymce
  },
  mixins: [mix],
  data() {
    return {
      active: 0, // 翻页
      product: {}, // s商品列表
      serviceIds: [], // 商品服务
      categoryProps: {
        emitPath: false,
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'id',
        label: 'name'
      },
      dialogImageUrl: '',
      dialogVisible: false,
      albumImgList: [],
      fileList: [],
      tempSkuColor: {
        text: '',
        list: [],
        checkdeList: []
      },
      tempSkuSize: {
        text: '',
        list: [],
        checkdeList: []
      },
      pmsSkuStockList: [], // sku列表
      tempId: '', // 临时id
      rules: {
        name: [{ required: true, message: '商品名称必填', trigger: 'blur' }],
        productSn: [{ required: true, message: '商品编码必填', trigger: 'blur' }],
        productCategoryId: [{ required: true, message: '商品分类必填', trigger: 'blur' }],
        brandId: [{ required: true, message: '商品品牌必填', trigger: 'blur' }],
        description: [{ required: true, message: '商品描述必填', trigger: 'blur' }],
        originalPrice: [{ required: true, message: '商品原价必填', trigger: 'blur' }],
        weight: [{ required: true, message: '重量必填', trigger: 'blur' }],
        pic: [{ required: true, message: '缩略图必填', trigger: 'blur' }],
        keywords: [{ required: true, message: '搜索关键词必填', trigger: 'blur' }],
        lowStock: [{ required: true, message: '库存预警必填', trigger: 'blur' }],
        sort: [{ required: true, message: '商品排序必填', trigger: 'blur' }],
        serviceIds: [{ required: true, message: '商品服务必填', trigger: 'blur' }],
        detailTitle: [{ required: true, message: '标题必填', trigger: 'blur' }],
        detailDesc: [{ required: true, message: '副标题必填', trigger: 'blur' }]
      },
      firstPageFiled: ['name', 'productSn', 'productCategoryId', 'brandId', 'description', 'originalPrice', 'weight', 'pic', 'keywords', 'lowStock', 'sort', 'serviceIds'],
      secondPageFiled: ['detailTitle', 'detailDesc'],
      thirdlyPageFiled: [],
      id: '' // 删除所用id
    }
  },
  watch: {
    serviceIds: {
      handler(newValue, oldValue) {
        // 目标变化时的操作
        // console.log('目标变化了：', newValue, oldValue)
        this.product.serviceIds = newValue.join(',')
      },
      deep: true
    }
  },
  created() {
    this.getAllCategory()
    this.getBrandList()
    if (this.$route.params.productId) {
      this.getEditProduct()
    }
  },

  methods: {
    // 更新商品
    async getupdateProductAndSkus() {
      this.doAddProduct()

      console.log(this.product.brandId)

      this.BrandList.forEach(item => {
        if (this.product.brandId === item.id) {
          this.product.brandName = item.name
        }
      })
      console.log(this.product.brandName)

      const res = await updateProductAndSkus({
        pmsSkuStockList: this.pmsSkuStockList,
        product: this.product
      })
      const { message, success } = res
      if (success) {
        this.$message.success('更新成功')
        this.$router.push({ name: 'productList' })
      } else {
        this.$message.warning(message)
      }
    },
    // 新增商品
    async getaddProductAndSkus() {
      this.doAddProduct()
      const res = await addProductAndSkus({
        pmsSkuStockList: this.pmsSkuStockList,
        product: this.product
      })
      const { message, success } = res
      if (success) {
        this.$message.success('保存成功')
        this.$router.push({ name: 'productList' })
      } else {
        this.$message.warning(message)
      }
    },
    // 规整数据
    doAddProduct() {
      // 添加sku列表
      const tempSkuList = []
      this.pmsSkuStockList.forEach(item => {
        tempSkuList.push({
          ...item,
          spData: JSON.stringify([
            {
              key: '颜色',
              value: item.color
            },
            {
              key: '大小',
              value: item.size
            }
          ])
        })
      })
      this.pmsSkuStockList = tempSkuList
    },
    // 获取编辑页面信息
    async getEditProduct() {
      const res = await productSkusDetail(this.$route.params.productId)
      console.log(res)
      const { data: { product, skus }, success } = res
      if (success) {
        this.product = product
        this.pmsSkuStockList = skus
        this.id = product.id
        this.serviceIds = product.serviceIds.split(',')
        const jsonArr = []
        skus.forEach(item => {
          jsonArr.push(...JSON.parse(item.spData))
        })
        // console.log(jsonArr)
        jsonArr.forEach(item => {
          if (item.key === '颜色') {
            this.tempSkuColor.list.push(item.value)
          } else {
            this.tempSkuSize.list.push(item.value)
          }
        })
        this.tempSkuColor.list = [...new Set(this.tempSkuColor.list)]
        this.tempSkuSize.list = [...new Set(this.tempSkuSize.list)]
        // this.tempSkuColor.checkdeList = this.tempSkuColor.list
        // this.tempSkuSize.checkdeList = this.tempSkuSize.list
        // sku表
        const jsonArr2 = []
        skus.forEach(item => {
          jsonArr2.push(JSON.parse(item.spData))
        })
        jsonArr2.forEach((item1, idx) => {
          item1.forEach(item2 => {
            if (item2.key === '颜色') {
              this.$set(this.pmsSkuStockList[idx], 'color', item2.value)
              // this.pmsSkuStockList[idx].color = item2.value
            } else {
              this.$set(this.pmsSkuStockList[idx], 'size', item2.value)
              // this.pmsSkuStockList[idx].size = item2.value
            }
          })
        })
        // console.log(jsonArr2)
        // 相册集
        this.albumImgList = product.albumPics.split(',')
        this.albumImgList.forEach(item => {
          this.fileList.push({
            url: item
          })
        })
        // console.log(albumImg)
      }
    },

    next() {
      let fields = []
      if (this.active === 0) {
        fields = this.firstPageFiled
      } else if (this.active === 1) {
        fields = this.secondPageFiled
      } else if (this.active === 2) {
        fields = this.thirdlyPageFiled
      }
      let allVaildte = true
      this.$refs.productForm.validateField(fields, (errMsg) => {
        if (errMsg) {
          allVaildte = false && allVaildte
        } else {
          allVaildte = true && allVaildte
        }
      })
      if (allVaildte) {
        this.active++
      } else {
        this.$message.warning('请完整填写信息')
      }
      // this.active++
    },
    // 上一步
    prev() {
      if (this.active > 0) {
        this.active--
      }
    },
    // 添加图片 第一页的
    handleCoverImgSucc(response) {
      // this.$refs.coverImgUplaod.clearFiles()
      // 给article里添加实例 利用this.$set完成响应式
      const { success, data } = response
      if (success) {
        this.$set(this.product, 'pic', data.fileUrl)
        // this.$set(this.product, 'albumPics', data.fileUrl)
        this.$message.success('添加成功')
      }
      // console.log(response)
    },
    /*     // 判断图片格式大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/webp'
      const isLtSize = file.size / 1024 / 1024 < 1.5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/WEBP 格式!')
      }
      if (!isLtSize) {
        this.$message.error('上传头像图片大小不能超过 1.5MB!')
      }
      return isJPG && isLtSize
    }, */
    // 删除画册
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      this.albumImgList = this.albumImgList.filter(item => item !== file.url)
      this.fileList = this.fileList.filter(item => item.url !== file.url)

      this.product.albumPics = this.albumImgList.toString()
    },
    // 点击查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传成功
    handlePicSucc(res, file) {
      // console.log(res)
      // console.log(file)
      const { data: { fileUrl }, success } = res
      const uploadedFile = { url: fileUrl }

      if (success) {
        this.fileList.push(uploadedFile)
        this.albumImgList.push(fileUrl)
      }
      this.product.albumPics = this.albumImgList.toString()
    },

    // sku
    // 添加
    addSkuOptions(type) {
      let tem
      if (type === 'color') {
        // 颜色
        tem = this.tempSkuColor
      } else {
        // 大小
        tem = this.tempSkuSize
      }
      if (tem.text) {
        if (!tem.list.find(item => item === tem.text)) {
          tem.list.push(tem.text)
          tem.text = ''
        } else {
          this.$message.warning(`${tem.text}已存在`)
        }
      }
    },
    // 删除
    removeOptions(type, value) {
      let tem
      if (type === 'color') {
        // 颜色
        tem = this.tempSkuColor
      } else {
        // 大小
        tem = this.tempSkuSize
      }
      tem.list = tem.list.filter(item => item !== value)
      tem.checkdeList = tem.checkdeList.filter(item => item !== value)
    },
    // 删除对应sku
    removeSkuList(id) {
      const idx = this.pmsSkuStockList.findIndex(item => item.id === id)
      this.pmsSkuStockList.splice(idx, 1)
      console.log(this.pmsSkuStockList)
    }
    /*     // 生成sku列表杨式
    buildSkuList() {
      this.$confirm('此操作将删除sku列表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 生成
        this.pmsSkuStockList = []
        this.doBuildSkuList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    doBuildSkuList() {
      const temp1 = this.tempSkuColor.checkdeList
      const temp2 = this.tempSkuSize.checkdeList
      console.log(temp1, temp2)
      if (temp1.length && temp2.length) {
        temp1.forEach(item1 => {
          temp2.forEach(item2 => {
            this.pmsSkuStockList.push({
              tempId: uuidv4(),
              'lockStock': '', // 锁定库存
              'lowStock': '', // 库存警戒线
              'pic': '', // 图片
              'price': '', // 当前价格
              'promotionPrice': '', // 单品促销价格
              'sale': '', // 销量
              'skuCode': '', // sku的编码,手动填写
              // spData:  [{"key":"颜色","value":"蓝色"},{"key":"容量","value":"32G"}]
              // 'spData': 'string', // sku属性，json格式String类型 ,
              'stock': '', // 库存
              color: item1,
              size: item2
            })
          })
        })
        // console.log(this.pmsSkuStockList)
      } else {
        this.$message.warning('颜色或者大小至少选择一项')
      }
    },]
    // sku列表图片
    handleSkuPic(res) {
      const item = this.pmsSkuStockList.find(item => item.tempId === this.tempId)
      if (item) {
        const { data: { fileUrl }, success } = res
        if (success) {
          item.pic = fileUrl
          // 清空tempId
          this.tempId = ''
        } else {
          this.$message.warning('添加失败')
        }
      }
    },
    // 获取临时id
    handlPicUpload(tempId) {
      this.tempId = tempId
    },
    // 新增sku
    newAddSkList() {
      this.doBuildSkuList()
    },
    // 删除对应sku
    removeSkuList(id) {
      console.log(this.pmsSkuStockList)
      const idx = this.pmsSkuStockList.findIndex(item => item.id === id)
      this.pmsSkuStockList.splice(idx, 1)
    } */

  }
}
</script>

<style lang="scss" scoped>
.el-upload--picture-card:hover,
.el-upload:focus {
  display: flex;
  align-items: center;
  width: 80px;
  height: 80px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
